<template>
  <div>
    <h1 class="page-header">{{ moviesList.title }}</h1>

    <div class="row placeholders">
      <div class="media" v-for='item in moviesList.subjects'>
        <a class="media-left">
          <img :src="item.images.medium">
        </a>
        <div class="media-body">
          <span class="badge pull-right ">{{ item.rating.average }}</span>
          <h2 class="media-heading">{{ item.title }}</h2>
          <p class="media-heading">类型：<span v-for="a in item.genres">{{ a }}&nbsp;&nbsp;</span></p>
          <p class="media-heading">导演：<span v-for="a in item.directors">{{ a.name }}&nbsp;&nbsp;</span></p>
          <p class="media-heading">主演：{{ item.casts | castsFilter }}</p>
        </div>
      </div>
      <!--分页-->
      <nav v-show="!loading">
        <p class="tc">总共：{{page.totalCount}}条记录，第{{page.current}}/{{page.totalPage}}页</p>
        <ul class="pager">
          <li :class="{disabled:page.current<=1}"><a @click="goBack()">上一页</a></li>
          <li :class="{disabled:page.current>=page.totalPage}"><a @click="goForward()">下一页</a></li>
        </ul>
      </nav>
    </div>
    <!--loading效果-->
    <div class="loading" v-show="loading">
      <div class="spinner">
        <div class="spinner-container container1">
          <div class="circle1"></div>
          <div class="circle2"></div>
          <div class="circle3"></div>
          <div class="circle4"></div>
        </div>
        <div class="spinner-container container2">
          <div class="circle1"></div>
          <div class="circle2"></div>
          <div class="circle3"></div>
          <div class="circle4"></div>
        </div>
        <div class="spinner-container container3">
          <div class="circle1"></div>
          <div class="circle2"></div>
          <div class="circle3"></div>
          <div class="circle4"></div>
        </div>
      </div>
    </div>
  </div>
</template>
<style>
</style>
<script>
  export default {
    name: 'list',
    props: ['S_PATH',"searchObj"],
    data () {
      return {
        prms: this.$route.name,//请求参数
        loading: true,
        moviesList: '',//渲染的数据
        page: {
          count:5,//每页显示数量
          start:0,//请求起始项
          current:1,//当前第几页
          totalCount:0,//总记录数
          totalPage:0,//总页数
          type: ''
        }
      }
    },
    watch:{
      searchObj: {
        handler: function (val, oldVal) {
          var that = this;
          //当输入狂中有值时才搜索
          if(val.search){
            //解决没输入完就搜索的问题
            setTimeout(function(){
                that.searchData(val.search)
            },100)
          }
        },
        deep: true
      }
    },
    methods: {
      //上一页
      goBack () {
        if( this.page.current <= 1){
          return;
        }
        if( this.page.type == 'search'){
          this.page.current--;
          this.loading = true;
          this.searchData( this.page.search,this.page.current );
          return false;
        }
        this.page.current--;
        this.loading = true;
        this.getData();
      },
      //下一页
      goForward () {
        if( this.page.current >= this.page.totalPage ){
          return;
        }
        if( this.page.type == 'search'){
          this.page.current++;
          this.loading = true;
          this.searchData( this.page.search,this.page.current );
          return false;
        }
        this.page.current++;
        this.loading = true;
        this.getData();
      },
      crossService_jsonp (url,params,fn) {
        var callback = "jsonp_" + (Math.random()*Math.random()).toString().substr(2);
			  console.log(callback);
        window[callback] = function (data) {
          fn(data);
          window.document.body.removeChild(scriptElement);
        }
        var queryStr = '';
        //拼接请求参数
        for( var key in params ){
          queryStr += key + '=' + params[key] + '&';
        }
        //拼接回调函数
        queryStr += 'callback' + '=' + callback;
        url += '?' + queryStr;
        console.log(url);
        var scriptElement = window.document.createElement('script');
        scriptElement.src = url;
        window.document.body.appendChild(scriptElement);
        },
        //搜索功能函数
        searchData (search,current) {
          var that = this;
          this.loading = true;
          this.page.current = current || 1;
          this.page.search = search;//记录搜索内容，供点击下一页使用
          this.page.type = 'search'
          this.rq_searchData({q:search,count:5,start:((this.page.current-1)*this.page.count)},this.page.type,function (data) {
            that.moviesList = data;
            console.log(data);
            that.loading = false;
            that.page.totalCount = data.total;
            that.page.totalPage = Math.ceil( data.total/data.count );
          });
        },
        //请求列表数据
        getData () {
          var that = this;
          let url = this.S_PATH + '/v2/movie/' + this.prms;
          let rq_params = {city:"合肥",count:5,start:((this.page.current-1)*this.page.count)};
          let fnCb = function (data) {
            console.log(data);
            that.loading = false;
            that.page.totalCount = data.total;
            that.page.totalPage = Math.ceil( data.total/data.count );
            that.moviesList = data;
          };
          this.crossService_jsonp (url,rq_params,fnCb);
        },
        //请求搜索数据
        rq_searchData (params,type,fn) {
          let url = this.S_PATH + '/v2/movie/' + type;
          this.crossService_jsonp(url,params,function (data) {
            fn(data);
          });
        }
    },
    mounted () {
      var that = this;
      this.getData();

    }
  }







</script>
